<template>
  <div class="mid-block2">
    <el-tabs v-model="activeName" class="tabNav" @tab-click="handleClick">
      <el-tab-pane label="切断" name="1">
        <div
          class="static-info"
          style="max-height:80px;overflow-y: scroll; position: inherit; top: 10px; text-align: center"
        >
          <p v-for="(item,index) in GatewayData" :key="index" class="com1" @click="addClass1(index,item)">
            <span class="t"><i
              class="iconfont"
              :class="addClassItem1==index?'icon-wancheng':'icon-yuanhuan'"
            />{{ item.gatewayInfo.gatewayCode }}</span>
          </p>
        </div>
        <el-row :gutter="20" justify="center">
          <el-col :span="12" style="    margin-left: 25%;">
            <div class="grid-content bg-purple qieduan">
              <div
                v-for="(item,index) in hjDatas"
                v-if="hjDatas.length >0"
                :key="index"
                class="desc"
                style="right: 16%;"
              >
                <p><span>转速:</span>{{ item.gh }} r/min</p>
                <p><span>油压:</span>{{ item.gj }} r/min</p>
                <p><span>进刀量:</span>{{ item.bdKd }} -- {{ item.bdSd }} r/min</p>
                <p><span>工作时间:</span>{{ item.hyJl }} -- {{ item.bdSd }} r/min</p>
              </div>
              <div v-if="hjDatas.length ==0" class="desc" style="right: 16%;">
                <p><span>转速:</span>暂无数据 r/min</p>
                <p><span>油压:</span>暂无数据 r/min</p>
                <p><span>进刀量:</span>暂无数据 r/min</p>
                <p><span>工作时间:</span>暂无数据 r/min</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="坡口" name="2">
        <el-row v-if="addClassItem == 1" :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple bg1">
              <div class="desc">
                <p><span>a:</span>{{ huanGuanData.sleeveTransverseOneA ?huanGuanData.sleeveTransverseOneA:0 }}度
                </p>
                <p><span>c:</span>{{ huanGuanData.sleeveTransverseOneC ?huanGuanData.sleeveTransverseOneC:0 }} mm
                </p>
                <p><span>p:</span>{{ huanGuanData.sleeveTransverseOneP ?huanGuanData.sleeveTransverseOneP:0 }} mm
                </p>
                <p><span>t:</span>{{ huanGuanData.sleeveTransverseOneT ?huanGuanData.sleeveTransverseOneT:0 }} mm
                </p>
              </div>
              <h1 class="titme">横焊缝1</h1>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple bg1 bg2">
              <div class="desc">
                <p><span>S:</span>{{ huanGuanData.sleeveHornOneS ?huanGuanData.sleeveHornOneS:0 }} mm</p>
                <p><span>B:</span>{{ huanGuanData.sleeveHornOneB ?huanGuanData.sleeveHornOneB:0 }} mm</p>
                <p><span>T:</span>{{ huanGuanData.sleeveHornOneT ?huanGuanData.sleeveHornOneT:0 }} mm</p>
              </div>
              <h1 class="titme">角焊缝1</h1>
            </div>

          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple bg1">
              <div class="desc">
                <p><span>a:</span>{{ huanGuanData.sleeveTransverseTwoA ?huanGuanData.sleeveTransverseTwoA:0 }}度
                </p>
                <p><span>c:</span>{{ huanGuanData.sleeveTransverseTwoC ?huanGuanData.sleeveTransverseTwoC:0 }} mm
                </p>
                <p><span>p:</span>{{ huanGuanData.sleeveTransverseTwoP ?huanGuanData.sleeveTransverseTwoP:0 }} mm
                </p>
                <p><span>t:</span>{{ huanGuanData.sleeveTransverseTwoT ?huanGuanData.sleeveTransverseTwoT:0 }} mm
                </p>
              </div>
              <h1 class="titme">横焊缝2</h1>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple bg1 bg2">
              <div class="desc">
                <p><span>S:</span>{{ huanGuanData.sleeveHornTwoS ?huanGuanData.sleeveHornTwoS:0 }} mm</p>
                <p><span>B:</span>{{ huanGuanData.sleeveHornTwoB ?huanGuanData.sleeveHornTwoB:0 }} mm</p>
                <p><span>T:</span>{{ huanGuanData.sleeveHornTwoT ?huanGuanData.sleeveHornTwoT:0 }} mm</p>
              </div>
              <h1 class="titme">角焊缝2</h1>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="addClassItem == 2" :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple bg1">
              <div class="desc">
                <p>
                  <span>a:</span>{{ huanGuanData.tubeChangeTransverseOneA ?huanGuanData.tubeChangeTransverseOneA:0 }}
                  度</p>
                <p>
                  <span>c:</span>{{ huanGuanData.tubeChangeTransverseOneC ?huanGuanData.tubeChangeTransverseOneC:0 }}
                  mm</p>
                <p>
                  <span>p:</span>{{ huanGuanData.tubeChangeTransverseOneP ?huanGuanData.tubeChangeTransverseOneP:0 }}
                  mm</p>
                <p>
                  <span>t:</span>{{ huanGuanData.tubeChangeTransverseOneT ?huanGuanData.tubeChangeTransverseOneT:0 }}
                  mm</p>
              </div>
              <h1 class="titme">横焊缝1</h1>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple bg1">
              <div class="desc">
                <p>
                  <span>a:</span>{{ huanGuanData.tubeChangeTransverseTwoA ?huanGuanData.tubeChangeTransverseTwoA:0 }}
                  度</p>
                <p>
                  <span>c:</span>{{ huanGuanData.tubeChangeTransverseTwoC ?huanGuanData.tubeChangeTransverseTwoC:0 }}
                  mm</p>
                <p>
                  <span>p:</span>{{ huanGuanData.tubeChangeTransverseTwoP ?huanGuanData.tubeChangeTransverseTwoP:0 }}
                  mm</p>
                <p>
                  <span>t:</span>{{ huanGuanData.tubeChangeTransverseTwoT ?huanGuanData.tubeChangeTransverseTwoT:0 }}
                  mm</p>
              </div>
              <h1 class="titme">横焊缝1</h1>
            </div>
          </el-col>

        </el-row>
      </el-tab-pane>
      <el-tab-pane label="焊机" name="3">
        <mid-block2 :new-space-id="newSpaceId" @on-change="setData" />
      </el-tab-pane>
      <el-tab-pane label="检测" name="4">
        <div class="jianceCon">
          <div class="items" @click="getId(1)">
            <div class="itemTop">
              <img src="@/assets/img/project-screen-icon2.png" alt="">
              <span>检测</span>
            </div>
            <div class="itemBttom">
              <img src="@/assets/img/project-screen-icon4.png" alt="">
              <span>01</span>
            </div>
          </div>
          <div class="tip">
            <img src="@/assets/img/project-screen-icon5.png" alt="">
          </div>
          <div class="items" @click="getId(2)">
            <div class="itemTop">
              <img src="@/assets/img/project-screen-icon1.png" alt="">
              <span>防腐</span>
            </div>
            <div class="itemBttom">
              <img src="@/assets/img/project-screen-icon4.png" alt="">
              <span>02</span>
            </div>
          </div>
          <div class="tip">
            <img src="@/assets/img/project-screen-icon5.png" alt="">
          </div>
          <div class="items" @click="getId(3)">
            <div class="itemTop">
              <img src="@/assets/img/project-screen-icon3.png" alt="">
              <span>回填</span>
            </div>
            <div class="itemBttom">
              <img src="@/assets/img/project-screen-icon4.png" alt="">
              <span>03</span>
            </div>

          </div>

        </div>

      </el-tab-pane>

    </el-tabs>
    <div v-if="isHover" class="model11">
      <span class="el-icon-close closeModel" @click="isHover=false" />
      <h3 class="modeltitle">
        审批状态:
        <span v-if="jianceDetail.qualifiedStatus==0">待确认</span>
        <span v-if="jianceDetail.qualifiedStatus==1">不合格</span>
        <span v-if="jianceDetail.qualifiedStatus==2">合格</span>
      </h3>
      <h3 class="modeltitle">
        标题:{{ jianceDetail.title }}
      </h3>
      <p class="modeldesc">
        描述: {{ jianceDetail.content }}
      </p>
      <el-image
        v-for="(item,index) in imgUrl"
        v-if="imgUrl.length>0"
        style="width: 100px; height: 100px"
        :src="item|imgPath"
        :preview-src-list="srcList"
      />
      <el-image
        v-if="imgUrl.length<=0"
        :preview-src-list="srcList"
        style="width: 100px; height: 100px"
        :src="jianceDetail.image|imgPath"
      />
    </div>
  </div>
</template>

<script>
import 'swiper/css/swiper.css'
import {
  postHandle
} from '@/api'
import AutoRefreshMixin from '../mixin/AutoRefreshMixin'
import dayjs from 'dayjs'
import MidBlock2 from '@/pages/project/views/screen2/components/MidBlock2'
export default {
  name: 'MidBlock',
  components: {
    MidBlock2
  },
  mixins: [AutoRefreshMixin],

  props: {
    newSpaceId: {
      type: String
    }
  },
  data() {
    return {
      activeName: '1',
      radio: 3,
      addClassItem: 1,
      addClassItem1: 0,
      imgUrl: [],
      srcList: [],
      isHover: false,
      isShowTab: false,
      isShowTab1: true,
      huanGuanData: {
        type: 1
      },
      jianceDetail: {},
      hjDatas: [],
      GatewayData: [],
      timer: null,
      GatewayCode: null,
      css: '',
      timer: null
    }
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId
    },
    entSpaceId() {
      return this.$store.state.project.object.entSpaceId
    }
  },
  watch: {
    newSpaceId(v) {
      if (v) {
        this.getDevice(), this.getGrooveList(), this.getHjDatas(this.css), this.isHover = false, this
          .getGatewayList()
      }
    }
  },
  created() {
    this.getDevice()
    this.getGrooveList()
    // this.getJianceData(1)
    this.getGatewayList()
  },
  mounted() {
    // this.timer = setInterval(() => {
     
    //   this.getHjDatas(this.GatewayCode)
    // }, 1000)

    this.timer = setInterval(() => {
      this.getHjDatas(this.css)
    }, 10000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    likai() {

    },
    getId(a) {
      this.getJianceData(a)
      this.desc = a
      this.imgUrl = []
      this.jianceDetail = {}
    },
    mouseover(a) {
      // this.isHover = true
      // this.getJianceData(a)
      // this.desc = a
      // this.imgUrl = []
      // this.jianceDetail = {}
    },

    mouseLeave(a) {
      // this.isHover = false
      // this.imgUrl = []
      // this.jianceDetail = {}
    },
    addClass(i) {
      this.addClassItem = i
    },
    addClass1(i, item) {
      this.addClassItem1 = i
      this.css = item.gatewayCode
      this.getHjDatas(this.css)
    },
    handleClick(tab, event) {
      tab.index == 1 ? this.isShowTab = true : this.isShowTab = false
      tab.index == 0 ? this.isShowTab1 = true : this.isShowTab1 = false
      this.isHover = false
    },
    chooseHandle(index) {
      this.active = index
      this.$emit('on-change', this.deviceList[index])
    },
    refreshHandle() {
      if (this.deviceList && this.deviceList.length > 0) {
        this.getData()
      }
    },

    // 网管列表
    getGatewayList() {
      return new Promise((resolve, reject) => {
        // postHandle(`/api/v1/welder-sbtx-second/gateway-comb/list`, {
        //   d: {
        //     filters: [{
        //       field: 'entSpaceId',
        //       operator: 'EQUALS',
        //       value: this.entSpaceId
        //     }],
        //     page: {
        //       p: 1,
        //       ps: 9999
        //     }
        //   }
        // }).then(res => {
        //   this.GatewayData = res.result
        //   this.css = res.result[0].gatewayCode
        //   this.getHjDatas(res.result[0].gatewayCode)
        // })

        postHandle(`/api/v1/welder-sbtx-second/project-equipment-comb/list`, {
          d: {
            filters: [{
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.newSpaceId || this.spaceId
            }, {
              field: 'code',
              operator: 'EQUALS',
              value: 'shear'
            }]
          }
        }).then(res => {
          this.GatewayData = res.result
          if (res.result&& res.result.length>0 && res.result[0].gatewayInfo) {
            this.css = res.result[0].gatewayInfo.gatewayCode
            this.getHjDatas(res.result[0].gatewayInfo.gatewayCode)
          }
        })
      })
    },
    // 大屏切断
    getHjDatas(code) {
      return new Promise((resolve, reject) => {
        postHandle(`/api/v1/welder-sbtx-second/hj-datas`, {
          d: {
            filters: [{
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.newSpaceId || this.spaceId
            }, {
              field: 'geteWayCode',
              operator: 'EQUALS',
              value: code
            }],
            page: {
              p: 1,
              ps: 1
            }
          }
        }).then(res => {
          this.hjDatas = res.result
        })
      })
    },
    // 防腐 检测 回填
    getJianceData(type) {
      return new Promise((resolve, reject) => {
        postHandle(`/api/v1/welder-sbtx-second/detection-comb/show-newest`, {
          d: {
            filters: [{
              field: 'type',
              operator: 'EQUALS',
              value: type
            },
            {
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.newSpaceId || this.spaceId
            }
            ]
          }

        }).then((res) => {
          let a = res.result
          if (a.title !== undefined) {
            this.isHover = true
            this.jianceDetail = res.result
            let len = null
            if (a.image) {
              len = a.image.match(/(\;)/g)
            }
            if (len != null) {
              let imgArr = []
              let oarr = []
              imgArr = a.image.split(';')
              imgArr.length = imgArr.length - 1
              for (let a in imgArr) {
                this.imgUrl.push(imgArr[a])
                oarr.push(process.env.VUE_APP_FILE_PATH + imgArr[a])
              }
              this.srcList = oarr
            } else {
              this.srcList = [process.env.VUE_APP_FILE_PATH + res.result.image]
            }
          } else {
            this.$message.error('暂无数据')
          }
        })
      })
    },
    getDevice() {
      postHandle('/api/v1/welder-sbtx-second/gateway-comb/list', {
        d: {
          filters: [{
            field: 'spaceId',
            operator: 'EQUALS',
            value: this.newSpaceId || this.spaceId
          },
          {
            field: 'type',
            operator: 'EQUALS',
            value: 'WELDER'
          },
          {
            field: 'showStates',
            operator: 'EQUALS',
            value: 1
          }
          ]
        },
        obj: {
          flag: true
        }
      })
        .then((res) => {
          this.deviceList = res.result
          if (this.deviceList[0]) {
            this.$emit('on-change', this.deviceList[0])
          }
        })
        .catch((error) => {
          reject(error)
        })
    },
    async getData() {
      for (let i = 0; i < this.deviceList.length; i++) {
        let deviceItem = this.deviceList[i]
        let data = await this.getGatewayData(deviceItem.gatewayCode)
        deviceItem['data'] = {
          cjTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          hj_stats: '0',
          current: 0,
          voltage: 0,
          ssSpeed: 0,
          hazTemp: 0,
          airFlux: 0,
          arPurity: 0
        }
        if (data && data.length > 0) {
          let item = data[0]
          if (deviceItem.gatewayCode === item.geteWayCode) {
            deviceItem['personCode'] = item.personCode
            if (!(deviceItem.baseInfo && deviceItem.baseInfo.personCode)) {
              let equipInfo = await this.getEquipInfo(
                item.personCode,
                item.equip_code,
                item.weldcode
              )
              deviceItem['baseInfo'] = equipInfo
            }
            item['hj_stats'] = '1'
            deviceItem['data'] = item
          }
        }
        this.$set(this.deviceList, i, deviceItem)
      }
    },
    viewDetails(obj) {
      this.obj = obj
      this.dialogVisible = true
    },
    getGrooveList() {
      return new Promise((resolve, reject) => {
        postHandle(`/api/v1/welder-sbtx-second/bevel-comb/list`, {
          d: {
            c: [{
              key: 'entSpaceId',
              value: this.$store.getters.entSpaceId
            },
            {
              key: 'spaceId',
              value: this.newSpaceId || this.spaceId
            }
            ]
          }

        }).then((res) => {
          if (res.result && res.result.length > 0) {
            this.huanGuanData = res.result[0]
            this.addClassItem = this.huanGuanData.type
          } else {
            this.addClassItem = 3
          }
        })
      })
    },
    getGatewayData(geteWayCode) {
      return new Promise((resolve, reject) => {
        postHandle('/api/v1/welder-sbtx-second/hj-datas-log', {
          d: {
            filters: [{
              field: 'geteWayCode',
              operator: 'EQUALS',
              value: geteWayCode
            },
            {
              field: 'ct',
              operator: 'GT',
              value: dayjs().subtract(3, 'minute').valueOf()
            },
            {
              field: 'kgl2',
              operator: 'EQUALS',
              value: '1'
            }
            ],
            page: {
              ps: 1
            }
          }
        }).then((res) => {
          resolve(res.result)
        })
      })
    },
    async getUserInfo(serialNum) {
      let result = await postHandle(
        ` /api/v1/welder-uac-second/user-information-comb/show-by-username`, {
          obj: {
            serialNum: serialNum
          }
        }
      )
      return result.result
    },
    getEquipInfo(personCode, equipCode, weldCode) {
      return new Promise((resolve, reject) => {
        postHandle(`/api/v1/welder-sbtx-second/hj-datas-comb/get-big-screen-data`, {
          d: {},
          obj: {
            personCode: personCode,
            equipCode: equipCode,
            weldCode: weldCode
          }
        }).then((res) => {
          resolve(res.result)
        })
      })
    },
    handleClickSlide(index) {
      this.active = index
      let data = this.dataList[index]
      this.obj = data
      this.$nextTick(() => {
        let carousel = this.$refs.carousel
        carousel.setActiveItem(index)
      })
    },
    setData(obj) {
      this.$emit('on-change', obj)
    }
  }
}
</script>
<style lang="less" scoped>
  .mid-block2 {
    position: relative;

    .static-info {
      position: absolute;
      top: 10px;
      right: 0;
      text-align: right;
    }

    .bg1 {
      width: 100%;
      height: 394px/2;
      background: url('~@/assets/img/projectScreen2.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;
      position: relative;

      .desc {
        bottom: 30%
      }

      .titme {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        position: absolute;
        bottom: 10px;
        left: 67px;
      }
    }

    .bg2 {
      width: 100%;
      height: 394px/2;
      background: url('~@/assets/img/project-screen3.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;
      position: relative;

    }

  }

  .tabNav {
    position: relative;

    .com1 {
      cursor: pointer;
    }

    .com2 {
      cursor: pointer;
    }
  }

  .qieduan {
    width: 100%;
    height: 394px/2;
    background: url('~@/assets/img/projectScreen1.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
    position: relative;

    .desc {
      bottom: 30%
    }

    .titme {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      position: absolute;
      bottom: 10px;
      left: 67px;
    }

  }

  .desc {
    position: absolute;
    right: 30%;
    bottom: 40%;

    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #BBBBBB;
      line-height: 22px;
      display: inline-block;
      width: 100px;
      text-align: right;
      padding-right: 20px;
    }
  }

  /deep/ .el-col-12 {
    padding-bottom: 10px
  }

  .items {
    position: relative;
    display: inline-block;
    color: #fff;
    cursor: pointer;

    .itemTop {
      width: 166px;
      height: 90px;
      line-height: 90px;
      background: #191A35;
      border-radius: 8px;
      border: 1px solid #4AAAA5;
      backdrop-filter: blur(12px);

      img {
        vertical-align: middle;
        padding-left: 25px;
        padding-right: 20px;
      }
    }

    .itemBttom {
      position: relative;

      span {
        display: inline-block;
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 34px;
        left: 0;
        font-size: 20px;
      }

    }

  }

  .tip {
    display: inline-block;
    vertical-align: top;
    padding: 33px 46px 0 46px;
  }

  .jianceCon {
    position: relative;
    padding: 60px 100px 0 100px;
  }

  .model11 {
    position: absolute;
    left: 300px;
    bottom: 400px;
    width: 375px;
    min-height: 260px;
    z-index: 2;
    background: linear-gradient(180deg, #191A35 0%, #03041C 100%);
    box-shadow: -2px 2px 9px 0px rgba(11, 90, 140, 0.74);
    border-radius: 10px;
    border: 1px solid #1E4744;
    padding: 20px;
    color: #fff;

    .modeltitle {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #54C1B8;
      line-height: 30px;
    }

    .modeldesc {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 20px;
    }

    /deep/ .el-image {
      margin-top: 10px;
      margin-right: 11px;
    }
  }

  /deep/ .el-tabs__item {
    color: #fff;
  }

  /deep/ .el-tabs__nav-wrap::after {
    background: #0C2031;
  }

  /deep/ .el-tabs__item.is-active {
    color: #5CD5C8 !important;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #5CD5C8;
  }

  .closeModel {
    font-size: 30px;
    position: absolute;
    right: 10px;
    top: 10px;
    border: 1px solid #5CD5C8;
    border-radius: 50%;
    color: #5CD5C8;
    cursor: pointer;
  }
</style>
